<template>
  <div class="club">
    <group class="showtips" v-if="showtips">
      <cell class="player_join" title="有玩家申请加入白名单" link="clubUser/joinClub">
        <img slot="icon" src="../../images/icon_S07.png" alt="数据统计">
        <span slot="default">去处理</span>
      </cell>
    </group>
    <p class="no_tips" v-if="ifTips">很抱歉，您还没有自己的专属亲友圈，请点击下方创建按钮来创建自己的专属亲友圈哦!</p>
    <group v-for="item in clubList" :key="item.clubId">
      <cell class="club_title">
        <div class="club_name" slot="title">
          <span>{{item.clubName + ' (' + item.clubId +')'}}</span>
          <span class="club_status">{{item.status === 1 ? '开启中' : '暂停中'}}</span>
        </div>
        <router-link class="right_tips" slot="default" :to="{path: 'clubShare',query: {clubData:JSON.stringify(item)}}">
          <img src="../../images/icon_S10.png" alt="二维码图片">
          <span>分享</span>
        </router-link>
      </cell>
      <cell class="club_setting" title="数据统计" :link="'clubData/todayData?clubId='+item.clubId+'&date='+nowdate">
        <img slot="icon" src="../../images/icon_S08.png" alt="数据统计">
      </cell>
      <cell class="club_setting" title="亲友圈设置" is-link @click.native="nextToPage(item)">
        <img slot="icon" src="../../images/icon_S09.png" alt="亲友圈设置"></cell>
    </group>
    <div class="footer">
      <x-button type="primary" class="club_create_btn" @click.native="nextToCreate">
        <img src="../../images/icon_jiaru.png" alt="创建按钮"> 创建
      </x-button>
    </div>
    <foot-guide :select="1"></foot-guide>
  </div>
</template>

<script>
import { Group, Cell, XButton } from "vux";
import { add0 } from "../../scripts/utils";
import footGuide from "../../components/footer/footGuide";
export default {
  data() {
    return {
      showtips: false,
      clubList: [],
      ifTips: false,
      nowdate: "", //当前年月
      clubValue: {}
    };
  },
  components: {
    Group,
    Cell,
    XButton,
    footGuide
  },
  created() {
    /**
     * 获取所有的信息
     */
    this.clubValue = this.apiService.getSessionData("clubValue");
    //获取当前时间
    let date = new Date();
    let nowYear = date.getFullYear();
    let nowMonth = add0(date.getMonth() + 1);
    let nowDate = add0(date.getDate());
    this.nowdate = nowYear + "-" + nowMonth + "-" + nowDate;
    this.$vux.datetime.hide();
    //获取是否有玩家申请加入亲友圈
    this.apiService.club.playerapplicationcount().then(result => {
      let res = result.data;
      if (res.playerapplicationcount > 0) {
        this.showtips = true;
      }
    });
    //获取亲友圈信息
    this.apiService.club.clublist().then(result => {
      let data = result.data.clublist;
      if (data) {
        this.clubList = data;
      } else {
        this.ifTips = true;
      }
    });
  },
  methods: {
    nextToPage(data) {
      this.clubValue = data;
      this.apiService.setSessionData("clubValue", this.clubValue);
      this.$router.push("create/preview?mode=edit");
    },
    nextToCreate() {
      // 只要点击创建就把存储的都清除掉
      sessionStorage.removeItem("white");
      sessionStorage.removeItem("black");
      this.apiService.removeSessionData("clubValue");
      sessionStorage.removeItem("currentrules");
      if (this.clubList.length >= 10) {
        return this.$vux.toast.text("您已超过能够创建亲友圈的上限（10个）");
      }
      this.$router.push("create");
    }
  }
};
</script>

<style>
.club {
  position: relative;
  padding-bottom: 120px;
  top: 0 !important;
}
.club .weui-cell {
  padding: 7px 15px;
}
.club .showtips .weui-cell {
  padding: 2px 15px;
}
.showtips .weui-cell {
  font-size: 0.3rem;
  line-height: 1;
}
.showtips img {
  width: 0.5rem;
}
.club::before {
  content: "";
  display: table;
}
.club_name {
  display: inline-block;
}
.club .footer {
  position: fixed;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f5f5f5;
  padding: 0.1rem 0.5rem 0.5rem;
  width: 100%;
}
.club_create_btn img {
  vertical-align: middle;
  width: 0.6rem;
  padding-bottom: 4px;
}
.club_status {
  color: #cc422e;
}
.club_setting .vux-label {
  color: #555;
  font-size: 0.28rem;
}
.club_title .vux-label {
  font-size: 0.3rem;
}
.club_setting img {
  width: 0.58rem;
  vertical-align: middle;
  padding-right: 0.05rem;
}

.no_tips {
  font-size: 0.3rem;
  padding: 0.7rem 0.3rem 0 0.3rem;
  text-indent: 2em;
}

.right_tips span,
.right_tips img {
  display: block;
  color: #555;
  font-size: 0.2rem;
  margin: 0 auto;
}
.right_tips img {
  width: 0.3rem;
}
.player_join {
  background-color: #00fffe;
}
</style>